.wpnc {
	margin: 0;
}

.wpnc__main {
	background-color: var( --color-surface );

	font: {
		family: $sans;
		size: $wpnc__font-size;
	}
	line-height: $wpnc__line-height;
	color: var( --color-neutral-70 );
	// Fixes font anti-aliasing in iframes: andrewmoreton.co.uk/typekit-iframes-safari-weird-antialiasing/
	-webkit-font-smoothing: subpixel-antialiased;

	@media only screen and ( max-width: 799px ) {
		background-color: var( --color-neutral-0 );
	}
	@media only screen and ( min-width: 409px ) and ( max-width: 430px ) {
		background-color: var( --color-surface );
	}

	// Text elements
	b,
	strong {
		font-weight: 600;
	}

	// Links
	a,
	a:visited {
		color: var( --color-primary );
		text-decoration: none;
	}

	a:hover,
	a:focus,
	a:active {
		color: var( --color-primary );
	}

	button {
		background-color: transparent;
		border: none;
		color: var( --color-primary );
		cursor: pointer;
		font-size: inherit;
		outline: none;
		padding: 0;

		&[disabled] {
			color: var( --color-neutral-light );
			cursor: default;
		}
	}

	header {
		border-bottom: 1px solid var( --color-neutral-5 );
		box-sizing: border-box;
		background-color: var( --color-surface );
		font-size: $wpnc__capital-font-size;
		height: $wpnc__title-bar-height + 1px;
		line-height: $wpnc__title-bar-height;
		padding: 0 $wpnc__padding-medium;
		text-align: center;

		nav {
			display: inline;
		}

		nav > div {
			display: inline;
			float: right;
			margin-right: -5px;
		}

		h1 {
			@extend %headertext;
			color: var( --color-neutral-40 );
			display: inline;
		}

		button {
			line-height: 38px;
		}

		.wpnc__back {
			@extend %headertext;
			margin-left: -5px;
			display: inline;
			float: left;

			.gridicon {
				margin-right: 4px;
				vertical-align: -4px;
			}
		}

		.wpnc__prev,
		.wpnc__next {
			float: left;
			outline: none;

			.gridicon {
				vertical-align: middle;
			}
		}

		.wpnc__prev {
			margin-right: 8px;
		}

		.disabled {
			opacity: 0.5;
		}
	}

	.wpnc__list-view.wpnc__current {
		display: none;
	}
	.wpnc__single-view:not( .wpnc__current ) {
		display: none;
	}

	.gridicon {
		fill: currentColor;
	}

	.wpnc__user__username,
	span.wpnc__user {
		font-weight: 600;
		a.wpnc__user__home {
			color: var( --color-neutral-70 );
		}
	}

	.wpnc__header a.wpnc__user {
		font-weight: 600;
		color: var( --color-neutral-70 );
	}

	.wpnc__header a.wpnc__post {
		color: var( --color-text-subtle );

		&:hover {
			color: var( --color-primary );
		}
	}

	span.wpnc__post {
		font-weight: 600;
	}

	%headertext {
		text-transform: uppercase;
		text-decoration: none;
		font-weight: 600;
		font-size: $wpnc__capital-font-size;
	}

	.rtl header .back::after {
		transform: rotate( 90deg );
	}

	.wpnc__filter {
		width: 100%;
		background-color: var( --color-surface );
		color: var( --color-text-subtle );
		border-bottom: 1px solid var( --color-neutral-5 );
		border-left: 1px solid var( --color-border-inverted );
		text-align: center; // Center filter in IE 9
		height: $wpnc__filter-height;
		box-sizing: border-box;
		direction: ltr;
		display: table; //fallback for browsers not supporting flexbox
	}

	.wpnc__note-list:not( .is-note-open ) .wpnc__filter {
		border-left: 1px solid var( --color-neutral-0 );
	}

	.wpnc__filter__segmented-control {
		display: table-row; // fallback for browsers not supporting flexbox.
		display: flex;
		padding: 6px 8px;

		&:focus {
			box-shadow: 0 0 0 2px var( --color-primary-light );
		}
	}

	.wpnc__filter__segmented-control-item {
		background: var( --color-surface );
		border: 1px solid var( --color-neutral-light );
		border-right: none;
		font-size: 13px;
		height: 26px;
		cursor: pointer;
		user-select: none; // Makes text unselectable
		box-sizing: border-box;
		vertical-align: middle;
		display: table-cell; // fallback for browsers not supporting flexbox.

		// Flexbox
		display: flex;
		align-items: center; // Vertically center text
		justify-content: center; // Horizontally center text
		flex: auto; // Fill horizontal space

		&:hover {
			color: var( --color-neutral-70 );
		}

		&:first-of-type {
			border-top-left-radius: 4px;
			border-bottom-left-radius: 4px;
		}

		&:last-of-type {
			border-right: 1px solid var( --color-neutral-light );
			border-top-right-radius: 4px;
			border-bottom-right-radius: 4px;

			&.selected {
				border-right-color: var( --color-primary );
			}
		}

		&.selected {
			background: var( --color-primary );
			border-color: var( --color-primary );
			color: var( --color-text-inverted );

			+ .segmented-control-item {
				border-left-color: var(
					--color-primary
				); // Color left border on adjacent item to match active filter
			}
		}
	}

	.wpnc__list-view .wpnc__notes,
	.error {
		background-color: var( --color-surface );
	}

	.wpnc__note {
		line-height: $wpnc__line-height;
		font-size: $wpnc__font-size;
		font-weight: normal;
		position: relative;
		clear: both;
		border-bottom: 1px solid var( --color-neutral-5 );

		div.wpnc__body > p,
		div.wpnc__preface p {
			line-height: $wpnc__line-height;
			text-align: center;
		}

		.wpnc__note-icon {
			display: block;
			width: $wpnc__icon-size;
			height: $wpnc__icon-size;
			position: relative;
			float: left;
			margin: 0 $wpnc__padding-large 0 $wpnc__padding-large;
		}

		.wpnc__note-icon img {
			width: $wpnc__icon-size;
			height: $wpnc__icon-size;
		}

		.wpnc__note-icon .wpnc__gridicon {
			display: flex;
			align-items: center;
			justify-content: center;
			color: white;
			height: 16px;
			width: 16px;
			border: {
				width: 1px;
				style: solid;
				radius: 50%;
			}
		}
	}

	.wpnc__done-message {
		background: var( --color-neutral-0 );
		color: var( --color-text-subtle );
		text-align: center;
		line-height: 50px;
		font-style: italic;
	}

	.wpnc__empty-notes-container {
		background-color: var( --color-neutral-0 );
	}

	.wpnc__empty-notes {
		text-align: center;
		position: relative;
		top: 50%;
		padding: 0 32px;
		transform: translateY( -50% );

		h2 {
			font: 300 21px/24px $sans;
			margin-bottom: 4px;
		}

		p {
			font: 400 16px/24px $sans;
		}
	}

	.wpnc__loading-indicator {
		display: block;
		background-color: var( --color-neutral-0 );
		height: 90px;
	}

	.wpnc__note-list {
		position: absolute;
		display: flex;
		flex-direction: column;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		overflow: hidden;
		&:not( .is-note-open ) {
			box-shadow: -3px 1px 10px -2px rgba( var( --color-neutral-70-rgb ), 0.075 );
		}
	}

	.wpnc__list-view {
		height: 100%;
		background-color: var( --color-neutral-0 );
		overflow-y: scroll;
		-webkit-overflow-scrolling: touch;
		border-left: 1px solid var( --color-neutral-0 );

		&.is-empty-list {
			overflow-y: hidden;
		}

		@media only screen and ( min-width: 409px ) and ( max-width: 430px ) {
			left: 9px;
		}

		h1 {
			text-align: center;
		}

		.wpnc__note {
			cursor: pointer;
		}

		.wpnc__note-icon .wpnc__gridicon {
			position: absolute;
			bottom: -5px;
			right: -8px;
			background-color: var( --color-neutral-20 );
			border-color: var( --color-border-inverted );
		}

		.wpnc__note .wpnc__note-icon img {
			border-radius: 50%;
		}

		.unread .wpnc__note-icon .wpnc__gridicon {
			background: var( --color-primary );
			border-color: var( --color-neutral-0 );
		}

		.wpnc__comment-unapproved .wpnc__note-icon .wpnc__gridicon {
			background: var( --color-warning );
			border-color: var( --color-warning-0 );
		}

		.unread {
			background: rgba( var( --color-primary-rgb ), 0.1 ); // rgba is used to meet AA contrast standard
		}

		.wpnc__traffic_surge .wpnc__note-icon img {
			width: 32px;
			height: 32px;
			background: var( --color-primary );
			border-color: var( --color-primary );
			border-width: 4px;
			border-style: solid;
		}

		.wpnc__selected-note {
			box-shadow: inset 4px 0 0 var( --color-primary );

			&.wpnc__comment-unapproved {
				box-shadow: inset 4px 0 0 var( --color-warning );
			}
		}

		.wpnc__text-summary {
			padding: 0 $wpnc__padding-large 0 2 * $wpnc__padding-large + $wpnc__icon-size;
			word-wrap: break-word;
			text-align: left;

			.wpnc__subject {
				max-height: 3em;
				-webkit-line-clamp: 2;
				@extend %ellipsy-box;
				font-size: $wpnc__font-size;
				line-height: $wpnc__line-height;
				letter-spacing: 0.15px;
			}

			.wpnc__subject .wpnc__gridicon {
				line-height: 1;
				vertical-align: -3px;
				color: var( --color-neutral-light );
				padding: 2px 5px 0 0;
			}

			.wpnc__subject .wpnc__comment {
				font-weight: 600;
			}

			.wpnc__subject .wpnc__user__site {
				font-weight: 600;
			}

			.wpnc__subject .wpnc__site {
				font-weight: 600;
			}

			.wpnc__excerpt {
				max-height: 3em;
				-webkit-line-clamp: 2;
				@extend %ellipsy-box;
				color: var( --color-text-subtle );
				font-size: $wpnc__font-size;
				letter-spacing: 0.25px;
				padding-top: 2px;
			}
		}

		.wpnc__time-group-title {
			display: flex;
			@extend %headertext;
			color: var( --color-neutral-40 );
			padding: 6px 0;
			background: rgba( 255, 255, 255, 0.95 );
			border-bottom: 1px solid var( --color-neutral-5 );

			.gridicons-time {
				align-self: center;
				margin-left: $wpnc__padding-medium;
				margin-right: 4px;
			}

			.gridicons-cog {
				cursor: pointer;
				align-self: center;
				margin-left: auto;
				margin-right: $wpnc__padding-small;
			}
		}

		.wpnc__time-group-wrap {
			height: $wpnc__header-height;
			top: 0;
			z-index: 100;
			text-align: left;
			position: -webkit-sticky;
			position: sticky;
		}
	}

	.disable-sticky .wpnc__time-group-wrap {
		position: static;
	}

	.wpnc__undo-item {
		background: var( --color-error );
		color: var( --color-text-inverted );

		p {
			padding-top: 1em;
			padding-bottom: 1em;
		}

		.wpnc__undo-link {
			margin-left: 1em;
			text-transform: uppercase;
			color: var( --color-text-inverted );
		}

		.wpnc__undo-message {
			margin-left: 2em;
		}
	}

	.wpnc__close-link {
		color: var( --color-text-inverted );
		position: absolute;
		right: 10px;
		cursor: pointer;
		user-select: none;
	}

	.wpnc__single-view,
	.error-view {
		h1 {
			text-align: center;
		}
	}

	.wpnc__single-view {
		position: absolute;
		display: flex;
		flex-direction: column;
		height: 100%;
		left: 0;
		right: 0;
		box-shadow: -3px 1px 10px -2px rgba( var( --color-neutral-70-rgb ), 0.075 );

		@media only screen and ( min-width: 480px ) {
			border-left: 1px solid var( --color-neutral-0 );
		}

		background-color: var( --color-neutral-0 );
		ol {
			height: 100%;
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
		}

		.wpnc__image {
			display: block;
			margin: auto;
			max-width: 100%;
		}

		.wpnc__user {
			p {
				@extend %ellipsy-box;
				-webkit-line-clamp: 1;
				font-size: $wpnc__font-size;

				.wpnc__user__username,
				a.wpnc__user__site {
					@extend %ellipsy;
					white-space: nowrap;
					display: inline;
				}
			}

			.wpnc__user__meta {
				&:not( .wpnc__user__bulleted ) {
					.wpnc__user__site {
						-webkit-line-clamp: 1;
						@extend %ellipsy-box;
					}
				}
			}
		}

		.wpnc__header {
			@extend %calypso-border;

			.wpnc__user__usertitle {
				-webkit-line-clamp: 1;
				@extend %ellipsy-box;
				white-space: nowrap;
				display: block;
			}

			.wpnc__excerpt {
				color: var( --color-secondary );
				-webkit-line-clamp: 1;
				@extend %ellipsy-box;
				white-space: nowrap;
				display: block;
			}

			a {
				outline: 0;
			}
		}

		.wpnc__comment .wpnc__user p.wpnc__excerpt {
			color: var( --color-secondary );
			max-height: 1.5em;
			font-size: 14px;
		}

		.wpnc__reply {
			color: var( --color-text-subtle );
			padding: $wpnc__padding-medium 0;
			border-bottom: 1px solid var( --color-neutral-5 );

			.wpnc__gridicon {
				padding: 0 10px;

				.gridicon {
					vertical-align: top;
				}
			}

			a {
				font-weight: 600;
				color: var( --color-text-subtle );
				text-decoration: underline;
			}
		}

		.wpnc__note:not( .wpnc__current ) {
			display: none;
		}

		.wpnc__note {
			background-color: var( --color-surface );
			border: none;
		}

		.wpnc__note-icon .wpnc__gridicon {
			font-size: 2em;
			background-color: var( --color-neutral-10 );
			border-color: var( --color-neutral-10 );
		}

		.wpnc__summary {
			color: var( --color-text-subtle );

			p {
				@extend %ellipsy-box;
				-webkit-line-clamp: 3;
			}
		}

		.wpnc__preface {
			@extend %ellipsy-box;
			-webkit-line-clamp: 3;
			margin-bottom: 1em;
		}

		.wpnc__preface p {
			display: inline;

			&::after {
				content: ' ';
			}

			&:first-of-type {
				display: block;
			}
		}

		.wpnc__time-group-title {
			display: none;
		}

		.wpnc__time-group-wrap {
			display: none;
		}
	}

	.wpnc__body {
		@extend %container;
	}

	.wpnc__summary {
		@extend %container;
		padding: $wpnc__padding-large 0;
	}

	.time-notification {
		float: right;
		color: var( --color-text-subtle );
		margin-left: 0.25em;
		line-height: 1em;
		margin-top: 0.2em;
	}

	.wpnc__body {
		.wpnc__paragraph {
			word-wrap: break-word;
			margin-top: $wpnc__padding-large;
			span.list {
				display: inline-block;
				margin-left: 2em;
				br {
					content: ' ';
					display: block;
				}
			}
			.wpnc__gridicon {
				vertical-align: text-top;
			}

			pre {
				background: var( --color-neutral-0 );
				border: 1px solid var( --color-neutral-10 );
				border-radius: 3px;
				padding: 4px;

				code {
					border: none;
					background: none;
				}
			}

			code {
				font-family: $code;
				font-size: 90%;
				color: var( --color-neutral-50 );
				background: var( --color-neutral-0 );
				border: 1px solid var( --color-neutral-10 );
				border-radius: 3px;
				padding: 0 2px;
			}
		}

		.wpnc__paragraph:first-of-type {
			margin-top: 0;
		}

		.wpnc__body-list {
			list-style: disc;
			padding: 0 16px;
		}

		.wpnc__body-todo {
			list-style: none;

			.wpnc__todo-done::before {
				content: '◉ ';
			}

			.wpnc__todo-not-done::before {
				content: '◎ ';
			}
		}

		blockquote {
			margin: 0 $wpnc__padding-medium $wpnc__padding-medium;
			font-style: italic;
			color: var( --color-text-subtle );
			background: transparent;
		}
	}

	.wpnc__single-view .wpnc__comment .wpnc__body .wpnc__user {
		border: none;
	}

	.wpnc__single-view img {
		max-width: 128px;
		height: auto;
	}

	.wpnc__single-view .wpnc__badge .wpnc__body .wpnc__body-content .wpnc__paragraph {
		text-align: center;
		font-family: $sans;
	}

	.wpnc__single-view .wpnc__badge img {
		display: block;
		margin: 0 auto;
		padding: 36px $wpnc__padding-large $wpnc__padding-large;
	}

	.wpnc__body .wpnc__body-content .wpnc__paragraph {
		font-family: $sans;
		padding: 0 $wpnc__padding-large;
		text-align: left;
	}

	.wpnc__body .wpnc__body-content .wpnc__paragraph:last-child {
		padding: 0 $wpnc__padding-large $wpnc__padding-medium;
	}

	.wpnc__comment .wpnc__body .wpnc__body-content,
	.wpnc__new_post .wpnc__body .wpnc__body-content,
	.wpnc__automattcher .wpnc__body .wpnc__body-content {
		border-bottom: 1px solid var( --color-neutral-5 );
		padding-top: $wpnc__padding-small;
	}

	.wpnc__comment .wpnc__body .wpnc__body-content {
		box-shadow: inset 4px 0 0 var( --color-neutral-0 );
		margin: 0 0 0 $wpnc__padding-medium;
	}

	.wpnc__body-content .match {
		font-weight: 600;
	}

	.wpnc__comment-unapproved .wpnc__body {
		.wpnc__body-content {
			box-shadow: inset 4px 0 0 var( --color-warning );
		}

		.blockquote {
			color: $wpnc__red-darker;
		}
	}

	.wpnc__comment-unapproved div.wpnc__user .wpnc__user__meta a:hover {
		text-decoration: underline;
	}

	.wpnc__comment .wpnc__body .wpnc__body-content .wpnc__user {
		padding-top: 0;
		padding-left: $wpnc__padding-medium;
	}

	.comment-self p,
	.comment-other {
		padding: 0 $wpnc__padding-medium;
	}

	.wpnc__post .wpnc__paragraph {
		padding: $wpnc__padding-large $wpnc__padding-medium 0;
	}

	@media only screen and ( min-width: 800px ) {
		.wpnc__list-view.wpnc__current {
			display: block;

			.wpnc__selected-note {
				animation-name: wpnc__selectIn;
				animation-timing-function: ease-in;
				animation-duration: 0.4s;
				animation-iteration-count: 1;
			}

			box-shadow: none;
		}

		.wpnc__note-list {
			left: auto;
			width: 410px;
		}

		.wpnc__single-view {
			right: 410px;
			left: 10px;
			top: 0;
			bottom: 0;
			z-index: -1;

			header {
				nav {
					display: none;
				}
			}

			.wpnc__note {
				margin-top: 0;
			}

			-webkit-transform: translate3d( 0, 0, 0 ); // fix for getting scrollbar in right z-index
		}

		.wpnc__single-view {
			animation-name: wpnc__slideIn;
			animation-timing-function: ease-out;
			animation-fill-mode: forwards;
			animation-duration: 0.2s;
			animation-iteration-count: 1;
		}
	}

	@keyframes wpnc__slideIn {
		from {
			-webkit-transform: translateX( 100% );
			transform: translateX( 100% );
		}
		to {
			-webkit-transform: translateX( 0% );
			transform: translateX( 0% );
		}
	}

	@keyframes wpnc__selectIn {
		from {
			background-color: var( --color-neutral-0 );
		}
		to {
			background-color: var( --color-surface );
		}
	}
}
